import Grid from "@material-ui/core/Grid";
import React from "react";
import CryptoWatchBox from "./components/CryptoWatchBox";

export interface CryptoWatchProps {}

const CryptoWatch: React.SFC<CryptoWatchProps> = () => {
  const ethChartOptions = {
    chart: {
      toolbar: {
        show: false,
      },
      sparkline: {
        enabled: true,
      },
    },
    dataLabels: {
      enabled: false,
    },
    colors: ["#4191ff"],
    stroke: {
      color: "#4191ff",
      width: 2,
      curve: "smooth",
    },

    xaxis: {
      categories: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
      crosshairs: {
        width: 1,
      },
    },
    yaxis: {
      show: false,
      min: 0,
    },

    legend: {
      show: false,
    },
  };
  const ethChartData = [
    {
      name: "USD Price:",
      data: [47, 38, 56, 24, 45, 65, 32, 52, 45, 32, 54, 56],
    },
  ];

  const cryptoLogo = require("./../../assets/images/CryptoWatch/bitcoin.svg");

  return (
    <>
      <Grid container>
        <Grid container item xs={12} spacing={2}>
          <Grid item md={3}>
            <CryptoWatchBox
              ethChartOptions={ethChartOptions}
              ethChartData={ethChartData}
              cryptoName={"BitCoin"}
              cryptoSymbol={"BTC"}
              cryptoValue={300}
              cryptoChanges={"+6.25"}
              cryptoLogo={cryptoLogo}
              isAscending={true}
            />
          </Grid>
          <Grid item md={3}>
            <CryptoWatchBox
              ethChartOptions={ethChartOptions}
              ethChartData={ethChartData}
              cryptoName={"BitCoin"}
              cryptoSymbol={"BTC"}
              cryptoValue={300}
              cryptoChanges={"+2"}
              cryptoLogo={cryptoLogo}
              isAscending={true}
            />
          </Grid>
          <Grid item md={3}>
            <CryptoWatchBox
              ethChartOptions={ethChartOptions}
              ethChartData={ethChartData}
              cryptoName={"BitCoin"}
              cryptoSymbol={"BTC"}
              cryptoValue={300}
              cryptoChanges={"-2"}
              cryptoLogo={cryptoLogo}
              isAscending={false}
            />
          </Grid>
          <Grid item md={3}>
            <CryptoWatchBox
              ethChartOptions={ethChartOptions}
              ethChartData={ethChartData}
              cryptoName={"BitCoin"}
              cryptoSymbol={"BTC"}
              cryptoValue={300}
              cryptoChanges={"-2"}
              cryptoLogo={cryptoLogo}
              isAscending={false}
            />
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

export default CryptoWatch;
